<template>
	<view class="container top">
		<view class="header">
			<view class="tab-bar">
				<view 
					v-for="(tab, index) in tabs" 
					:key="index"
					:class="['tab-item', currentTab === index ? 'active' : '']"
					@click="switchTab(index)"
				>
					{{ tab }}
				</view>
			</view>
		</view>
		
		<view class="content">
			<view v-if="currentTab === 0" class="activity-list">
				<view class="activity-item" v-for="(item, index) in onlineActivities" :key="index" @click="goToDetail(item)">
					<image :src="item.image" mode="aspectFill" class="activity-image"></image>
					<view class="activity-info">
						<text class="title">{{ item.title }}</text>
						<text class="time">{{ item.createTime }}</text>
						<view class="action-buttons">
							<button class="action-btn offline" @click.stop="handleOffline(item)">下架</button>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="currentTab === 1" class="activity-list">
				<view class="activity-item" v-for="(item, index) in pendingActivities" :key="index">
					<image :src="item.image" mode="aspectFill" class="activity-image"></image>
					<view class="activity-info">
						<text class="title">{{ item.title }}</text>
						<text class="time">{{ item.createTime }}</text>
						<text :class="['status', getStatusClass(item.status)]">{{ item.status }}</text>
						<view class="action-buttons">
							<template v-if="item.status === '审核通过'">
								<button class="action-btn online" @click="handleOnline(item)">上架</button>
							</template>
							<button class="action-btn delete" @click="handleDelete(index)">删除</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="publish-btn" @click="goToPublish">
			发布活动
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';

const tabs = ['已上架', '未上架'];
const currentTab = ref(0);
const activities = ref([]);

// 模拟自动审核通过
function autoReview() {
	setTimeout(() => {
		const updatedActivities = activities.value.map(item => {
			if (item.status === '审核中') {
				return { ...item, status: '审核通过' };
			}
			return item;
		});
		activities.value = updatedActivities;
		uni.setStorageSync('activities', updatedActivities);
	}, 3000); // 3秒后自动审核通过
}

const onlineActivities = computed(() => {
	return activities.value.filter(item => item.status === '已上架');
});

const pendingActivities = computed(() => {
	return activities.value.filter(item => item.status !== '已上架');
});

function getStatusClass(status) {
	switch (status) {
		case '审核中':
			return 'status-pending';
		case '审核通过':
			return 'status-approved';
		case '审核失败':
			return 'status-rejected';
		default:
			return '';
	}
}

function handleOnline(item) {
	const updatedActivities = activities.value.map(activity => {
		if (activity === item) {
			return { ...activity, status: '已上架' };
		}
		return activity;
	});
	activities.value = updatedActivities;
	uni.setStorageSync('activities', updatedActivities);
	uni.showToast({
		title: '上架成功',
		icon: 'success'
	});
}

function handleOffline(item) {
	const updatedActivities = activities.value.map(activity => {
		if (activity === item) {
			return { ...activity, status: '审核通过' };
		}
		return activity;
	});
	activities.value = updatedActivities;
	uni.setStorageSync('activities', updatedActivities);
	uni.showToast({
		title: '下架成功',
		icon: 'success'
	});
}

function handleDelete(index) {
	uni.showModal({
		title: '提示',
		content: '确定要删除这个活动吗？',
		success: (res) => {
			if (res.confirm) {
				const updatedActivities = activities.value.filter((_, idx) => {
					return currentTab.value === 0 
						? !(_.status === '已上架' && idx === index)
						: !(_.status !== '已上架' && idx === index);
				});
				activities.value = updatedActivities;
				uni.setStorageSync('activities', updatedActivities);
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				});
			}
		}
	});
}

function switchTab(index) {
	currentTab.value = index;
}

function goToPublish() {
	uni.navigateTo({
		url: '/pages/huodong/add-huodong'
	});
}

function goToDetail(item) {
	uni.navigateTo({
		url: `/pages/huodong/huodong-detail?item=${encodeURIComponent(JSON.stringify(item))}`
	});
}

function loadActivities() {
	const storedActivities = uni.getStorageSync('activities') || [];
	activities.value = storedActivities;
	autoReview(); // 加载数据后启动自动审核
}

onMounted(() => {
	loadActivities();
});

// 使用正确的 onShow 生命周期钩子
onShow(() => {
	loadActivities();
});
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #fff;
	padding-bottom: 120rpx;
	width: 690rpx;
}

.header {
	background-color: #fff;
	border-bottom: 1px solid #eee;
	border-radius: 24rpx;
	width: 690rpx;
}
.top {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/xiao@3x.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}

.tab-bar {
	display: flex;
	justify-content: space-around;
	padding: 0 30rpx;
	width: 690rpx;
}

.tab-item {
	padding: 30rpx 40rpx;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.tab-item.active {
	color: #007AFF;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4rpx;
	background-color: #007AFF;
}

.content {
	padding: 0;
	margin-top: 15rpx;
	width: 690rpx;
}

.activity-list {
	display: flex;
	flex-direction: column;
}

.activity-item {
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	border-bottom: 1px solid #eee;
}

.activity-image {
	width: 100%;
	height: 300rpx;
	display: none;
}

.activity-info {
	padding: 30rpx;
}

.title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	display: block;
}

.time {
	font-size: 24rpx;
	color: #999;
	display: block;
	margin-bottom: 16rpx;
}

.status {
	font-size: 28rpx;
	margin-bottom: 16rpx;
	display: inline-block;
	padding: 4rpx 18rpx;
	border-radius: 24rpx;
	font-weight: bold;
}

.status-pending {
	color: #fff;
	background: #ff9900;
}

.status-approved {
	color: #fff;
	background: #07c160;
}

.status-rejected {
	color: #fff;
	background: #ff4d4f;
}

.action-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
}

.action-btn {
	min-width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	border-radius: 4rpx;
	border: none;
	background-color: #007AFF;
	color: #fff;
	padding: 0 30rpx;
	margin-left: 400rpx;
}

.action-btn.online,
.action-btn.offline,
.action-btn.delete {
	background-color: #007AFF;
}

.publish-btn {
	position: fixed;
	bottom: 40rpx;
	left: 40rpx;
	right: 40rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background-color: #ff8c00;
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	z-index: 100;
}
</style>
